<template>
	<!-- 编辑状态 -->
	<view class="box-detail">
		<view class="box-detail-content">
			<view class="uni-form-item form-item">
				<view class="title"><text class="redss">*</text>项目名称</view>
				<input class="uni-input form-input" v-model="sendData.proName" name="input" placeholder="请选择项目名称"/>
			</view>
			<view class="uni-form-item form-item">
				<view class="title">项目编号</view>
				<input class="uni-input form-input bg-cyan" v-model="sendData.proNumber" name="input" placeholder="请填写项目编号" disabled/>
			</view>
			<view class="uni-form-item form-item date-pick-style">
				<view class="title"><text class="redss">*</text>启动时间</view>
				<uni-datetime-picker class="form-picker" type="date" :value="date" start="2000-2-31" end="2050-12-30" @change="dateChange"></uni-datetime-picker>
				<image src="../../../../static/images/icon_calendar.png" mode=""></image>
			</view>
			<view class="uni-form-item form-item">
				<view class="title"><text class="redss">*</text>项目星级</view>
				<view class="form-input">
					<uni-rate :value="rateData" @change="onChange" :max="5" :size="18" color="#f5dc55" active-color="#f5dc55" :is-fill="false"/>
				</view>
			</view>
			<view class="uni-form-item form-item">
				<view class="title"><text class="redss">*</text>成立工作组</view>
				<checkbox-group class="checkbox-group-style" @change="checkboxChange">
				  <label :class="item.checked ?  'checkbox selectBox' : 'checkbox '" @click="labelBtn(item.value,index)" v-for="(item,index) in labelList" :key="item.value" >
				    <checkbox :value="item.value" :checked="item.checked" v-show="false"/>
						<view class="image-box"></view>
						<view class="">{{item.name}}</view>
				  </label>
				</checkbox-group>
			</view>
			<view class="uni-form-item form-item">
				<view class="title"><text class="redss">*</text>项目来源</view>
				<input class="uni-input form-input" v-model="sendData.laiyuan" name="input" @click="showSinglePicker(1)" placeholder="请选择项目来源" disabled=""/>
			</view>
			<view class="uni-form-item form-item">
				<view class="title">中介机构</view>
				<input class="uni-input form-input" v-model="sendData.zhongjie"  name="input" @click="showSinglePicker(2)"  placeholder="请填写中介机构" disabled=""/>
			</view>
			<view class="uni-form-item form-item">
				<view class="title"><text class="redss">*</text>行业类别</view>
				<input class="uni-input form-input" v-model="sendData.hangye" @click="showSinglePicker(3)" name="input" placeholder="请选择行业类别" disabled=""/>
			</view>
			<view class="uni-form-item form-item">
				<view class="title"><text class="redss">*</text>核心诉求</view>
				<input class="uni-input form-input" v-model="sendData.suqiu" @click="showSinglePicker(4)" name="input" placeholder="请填写核心诉求" disabled=""/>
			</view>
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">预期投资</view>
				<input class="uni-input form-input-min" v-model="sendData.zongtouzi" name="input" placeholder="请填写金额"/>
				<view class="text-input-hou">( 亿元 )</view>
			</view>
			<view class="uni-form-item form-item date-pick-style">
				<view class="title">预期产值</view>
				<input class="uni-input form-input-min" v-model="sendData.min_touzi" name="input" placeholder="最小值"/>
				<view class="form-input-line">-</view>
				<input class="uni-input form-input-min" v-model="sendData.max_touzi" name="input" placeholder="最大值"/>
				<view class="text-input-hou">( 万元 )</view>
			</view>
			<view class="uni-form-item form-item">
				<view class="title"><text class="redss">*</text>项目简介</view>
				<textarea v-model="sendData.jianjie" class="uni-input textarea-style border-bot" placeholder="请填写工作内容"></textarea>
			</view>
			<view class="uni-form-item form-item border-width">
				<view class="title">项目备注</view>
				<textarea v-model="sendData.beizhu" class="uni-input textarea-style " placeholder="请填写备注信息"></textarea>
			</view>
		</view>
		<view class="box-attach">
			<view class="box-attach-title">附件</view>
			<view class="box-attach-row">
				<view class="box-attach-icon" >
					<image src="../../../../static/images/icon_enclosure.png" mode=""></image>
				</view>
				<text class="box-attach-name" @click="uploadFiles()">点击上传</text>
			</view>
			<view class="box-attach-row"  v-for="item,index in fileListData" :key="index">
				<view class="box-attach-icon" >
					<image src="../../../../static/images/icon_enclosure.png" mode=""></image>
				</view>
				<view class="box-attach-name">{{ item.fileShowName||"无"}}</view>
			</view>
			
		</view>
		
		<uni-popup id="popup" ref="popup" type="center" :animation="true">
			<view class="popup-content">
				<view class="btn-grow">
					<button type="default" @click="closeModal">返回</button>
					<button type="default" class="surebtn" @click="handleSubmit">确认</button>	
				</view>
				<view class="content-title">
					核心诉求
				</view>
				<view class="check-box">
					<checkbox-group class="check_group-style" @change="showCheckboxChange">
					  <label :class="item.checked ?  'checkboxes selectBoxes' : 'checkboxes'" @click="showlabelBtn(item.value,index)" v-for="(item,index) in labelDataListsss" :key="index" >
						<checkbox :value="item.value" :checked="item.checked" v-show="false"/>{{item.name}}
					  </label>
					</checkbox-group>
				</view>
				
			</view>
		</uni-popup>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker1" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm1" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		 <mpvue-picker :themeColor="themeColor" ref="mpvuePicker2" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		  @onConfirm="onConfirm2" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		  <mpvue-picker :themeColor="themeColor" ref="mpvuePicker3" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		   @onConfirm="onConfirm3" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		   <mpvue-picker :themeColor="themeColor" ref="mpvuePicker4" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		    @onConfirm="onConfirm4" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	export default {
		components: {
		    mpvuePicker
		},
		data() {
			return {
				labelDataListsss: [],
				themeColor: '#007AFF',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [3],
				pickerValueArray:[],
				dicData: {
				
				},
				sendData:{
					proName:' ',//项目名称
					proNumber:' ',//项目编号
					rateData:'',//项目星级
					group:'0',//是否成立工作组
					laiyuan:'',//项目来源
					laiyuan_value:'',
					zhongjie:'',//中介机构
					zhongjie_value:'',
					hangye:'',//行业类别
					hangye_value:'',
					date: new Date(),//项目启动时间
					suqiu:'',//核心诉求
					suqiu_value:'',
					zongtouzi:'',//预期投资
					min_touzi:'',//最小投资
					max_touzi:'',//最小投资
					jianjie:'',//项目简介
					beizhu:'',//备注
				},//全部参数
				labelName:'0',//选中状态
				labelDataListOs:[],
				labelDataList:[],
				labelList: [
					{
					  name: '否',
					  value: '0',
					  checked: true
					},
					{
						name: '是',
						value: '1',
						checked: false
					}
				],
				date: '',//项目启动时间
				rateData:1,
				fileListData:[],
				newFileList:[],
				zhongjieList:[]
			}
		},
		props: {
			pageData: {
				type: Object,
				default(){
					return {}
				}
			},
			changeListData:{
				type: Object,
				default(){
					return {}
				}
			}
		},
		watch:{
			pageData(){
				console.log(this.pageData,"this.pageData")
				this.rateData=this.pageData.model.EVALUATE
				this.labelName = this.pageData.model.CREATEWORKGROUP
				this.labelBtn(this.pageData.model.CREATEWORKGROUP*1,this.pageData.model.CREATEWORKGROUP*1)
				this.date=this.pageData.model.PROJ_START_UP
				if(this.pageData.fileList['PPP_T_BUS_PROJ.XGFJ']&&this.pageData.fileList['PPP_T_BUS_PROJ.XGFJ'].fileList.length){
					this.fileListData=this.pageData.fileList['PPP_T_BUS_PROJ.XGFJ'].fileList
				}
				this.sendData={
					proName:this.pageData.model.NAME,//项目名称
					proNumber:this.pageData.model.CODE,//项目编号
					laiyuan:this.pageData.laiyuan,//项目来源
					laiyuan_value:this.pageData.model.SOURCE,
					rateData:this.pageData.model.EVALUATE,//项目星级
					group:this.pageData.model.CREATEWORKGROUP,//是否成立工作组
					zhongjie:this.pageData.zhongjieName,//中介机构
					zhongjie_value:this.pageData.model.ORGANIZATION,
					hangye:this.pageData.hangye,//行业类别
					hangye_value:this.pageData.model.INDUSTRY,
					date: this.pageData.model.PROJ_START_UP,//项目启动时间
					suqiu:this.pageData.suqiu,//核心诉求
					suqiu_value:this.pageData.model.PROJ_APPEAL,
					zongtouzi:this.pageData.model.EXPECT_INVEST,//预期投资
					min_touzi:this.pageData.model.EXPECT_OUT_START,//最小投资
					max_touzi:this.pageData.model.EXPECT_OUT_END,//最小投资
					jianjie:this.pageData.model.PROJ_SURVEY,//项目简介
					beizhu:this.pageData.model.REMARK,//备注
					
				}//全部参数
			},
		},
		methods: {
			initData(){
				this.labelDataListsss=[]
			},
			showlabelBtn(name,index){
			  console.log(name,index,"nameindex")
			  if(this.labelDataListOs.join(',').indexOf(name) >-1){
			    this.labelDataListsss[index].checked = true
			  }else{
			    this.labelDataListsss[index].checked = false
			  }
			},
			showCheckboxChange: function (e) {
				this.labelDataListOs = e.detail.value
				
				
			},
			showModal() {
				this.$refs.popup.open()
			},
			closeModal() {
				this.$refs.popup.close()
			},
			async handleSubmit() {
				let newArry=[]
				this.sendData.suqiu_value=this.labelDataListOs.join(",")
				this.labelDataListOs.map(item=>{
					this.changeListData.suqiuList.map(ites=>{
						if(ites.CODE===item){
							newArry.push(ites.CODE_NAME)
						}
					})
				})
				this.sendData.suqiu=newArry.join(",")
				this.$refs.popup.close()
			},
			showSinglePicker(num) {
				this.initData()
				let dataArry=[]
				let backArry=[]
				if(num==4){
					if(this.labelDataListOs.length){
						backArry=this.labelDataListOs
					}else{
						backArry=this.pageData.model?this.pageData.model.PROJ_APPEAL.split(","):[]
					}
					if(this.changeListData.suqiuList){
						dataArry=this.changeListData.suqiuList
						dataArry.map(item=>{
							this.labelDataListsss.push(
								{
									name: item.CODE_NAME,
									value: item.CODE,
									checked: false
								}
							)
						})
					}
					if(backArry.length){
						this.labelDataListsss.map(item=>{
							backArry.map(ites=>{
								if(ites===item.value){
									item.checked=true
								}
							})
						})
					}
					this.showModal()
				}else{
					this.pickerValueArray=[]
					if(num==1){
						if(this.changeListData.laiyuanList){
							dataArry=this.changeListData.laiyuanList
							 this.$refs.mpvuePicker1.show()
						}
					}else if(num==2){
						if(this.sendData.laiyuan_value==3){
							dataArry=this.zhongjieList
							this.$refs.mpvuePicker2.show()
						}
					}else if(num==3){
						if(this.changeListData.hangyeList){
							dataArry=this.changeListData.hangyeList
							 this.$refs.mpvuePicker3.show()
						}
					}
					dataArry.map(item=>{
						this.pickerValueArray.push(
							{
								label: item.CODE_NAME,
								value: item.CODE
							}
						)
					})
					this.mode = 'selector'
					this.deepLength = 1
					this.pickerValueDefault = [0]
				}
			},
			onConfirm1(e) {
				console.log(e.value[0])
				this.sendData.laiyuan= e.label
			    this.sendData.laiyuan_value= e.value[0]
				if(this.sendData.laiyuan_value==3){
					const  busOrganizationDataSourceManage = JSON.parse(uni.getStorageSync('busOrganizationDataSourceManage'))
					//行业类别
					this.zhongjieList =busOrganizationDataSourceManage
				}else{
					this.sendData.zhongjie= ''
					this.sendData.zhongjie_value=''
				}
			},
			onConfirm2(e) {
				this.sendData.zhongjie= e.label
				this.sendData.zhongjie_value= e.value[0]
			},
			onConfirm3(e) {
				this.sendData.hangye= e.label
				this.sendData.hangye_value= e.value[0]
			},
			onConfirm4(e) {
				this.sendData.suqiu= e.label
				this.sendData.suqiu_value= e.value[0]
			},
			onCancel(e) {
			    console.log(e)
			},
			showdata(){
				console.log("传送的值为",this.sendData)
			},
			onChange(e) {
				console.log(e)
				this.sendData.rateData=e.value
			},
			dateChange(e) {
				this.date = e
				this.sendData.date=e 
			},
			labelBtn(name,index){
				this.labelName = name
				this.sendData.group=name
				if(index===0){
					this.labelList[0].checked = true
					this.labelList[1].checked = false	 
				}else{
					this.labelList[0].checked = false
					this.labelList[1].checked = true    
				}

			},
			checkboxChange: function (e) {
			  this.labelDataList = e.detail.value
			},
			uploadFiles(){
				this.$util.upload('_XGFJ','PPP_T_BUS_PROJ.XGFJ',(data)=>{
					if(data){
						this.newFileList=data
						this.fileListData.push({
							...data[0],fileShowName:data[0].name
						})
						// console.log(this.fileListData,"this.fileListData")
					}
				})
			}
		},
		onLoad(options) {
			
		},
		onShow(){
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding-bottom: 60rpx;
	}
	
	.bg-cyan{
		background-color: #f3f3f3;
	}

	.box-detail {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 26rpx 30rpx 50rpx 30rpx;
	}

	.textarea-style{
		// height:156rpx ;
	}
	.border-bot{
		border-bottom: 1px solid #e8f0f2;
	}
	.border-width{
		border-bottom: 3rpx solid #e8f0f2;
	}

	.box-detail-content {
		padding: 0 10rpx;
		// margin-top: 24rpx;

		&.border {
			border-bottom: 1px solid #e8f0f2;
		}
	}

	.box-detail-content-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.row-title {
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			width: 120rpx;
			margin-right: 10rpx;

			&.mag {
				margin-left: 18rpx;
			}
		}

		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: right;

			&.mag {
				margin-right: 18rpx;
			}
		}
	}

	.bar-contact {
		background-color: #0099cc;
		border-radius: 10px;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 18rpx;
		color: #FFFFFF;
		font-size: 24rpx;

	}
	.box-attach-style{
		display: flex;
		padding: 0 10rpx;
	}
	.box-attach{
		margin-top: 20rpx;
		padding: 20rpx 10rpx 0 10rpx;
		border-top: 1px solid #e8f0f2;
	
		.box-attach-title{
			width: 170rpx;
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			margin-right: 10rpx;
		}
		.box-attach-row {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			// align-items: center;
			// padding: 0 18rpx;
			// height: 38rpx;
			margin: 10rpx 0;
			.box-attach-icon {
				width: 34rpx;
				height:40rpx;
				margin-right: 20rpx;
				// background-image: url(../../../../static/images/icon_enclosure.png);
				// box-sizing: 34rpx 40rpx;
				// background-repeat: no-repeat;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.box-attach-name {
				word-wrap: break-word;
				word-break: break-all;
				white-space: pre-line;
				flex: 1;
				font-size: 26rpx;
				color: #0099cc;
			}
		}
	}

	.fixed-action-bar {
		width: 100%;
		display: flex;
		height: 70rpx;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;

		.item {
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.icon {
			width: 30rpx;
		}

		.btn-box {
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
		}

		.text-edit {
			font-size: 24rpx;
			color: #0099cc;
			line-height: 70rpx;
		}

		.text-delete {
			font-size: 24rpx;
			color: #cc3357;
			line-height: 70rpx;
		}
		
	}
	.uni-form-item{
		display: flex;
		justify-content: flex-start;
		margin-bottom: 30rpx;
	}
	
	.uni-input{
		font-size: 26rpx;
		color: #808080;
		// border-bottom:1px solid #dce4e6;
		flex:1;
	}
	.title{
		width: 170rpx;
		flex-shrink: 0;
		font-size: 26rpx;
		color: #414a5d;
	}
	
	.form-picker {
		width: 250rpx;
	}
    /deep/.uni-datetime-picker-timebox{
		font-size: 26rpx;
		color: #808080;
		border:0; 
		border-radius: 0; 
		padding: 0;
	}

	.date-pick-style{
		justify-content: flex-start;
		align-items: center;
		image{
			width:36rpx;
			height: 32rpx;
		}
		.text-input-hou{
			font-size: 26rpx;
			padding: 0 100rpx 0 20rpx;
		}
	}
	
	
	.checkbox-group-style{
		display: flex;
	}
	.checkbox{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-right: 20rpx;
		color:#808080 ;
		// <image src="../../../../static/images/icon_checkbox_01.png" mode=""></image>
		.image-box{
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
			background-image:url("../../../../static/images/icon_checkbox_02.png");
			background-size: 100% 100%; 
		}
	}
	.selectBox{
		color: #0099cc;
		.image-box{
			width: 30rpx;
			height: 30rpx;
			margin-right: 12rpx;
			background-image:url("../../../../static/images/icon_checkbox_01.png");
			background-size: 100% 100%; 
		}
		
	}
	/deep/.form-input-min{
		width: 300rpx;
	}
	.form-input-line{
		color: #808080;
		padding: 0 12rpx;
	}
	
	.uni-textarea{
		height: 78rpx;
	}
	
	.picker-box {
		height: 200px;
		text-align: center;
	}
	.main-box {
		width: 100%;
		.main-content {
			background-color: #fff;
			.title-box {
				display: flex;
				justify-content: space-around;
				.title-txt {
					
				}
			}
		}
		
	}
	.popup-content {
		width: 680rpx;
		background-color: #fff;
		padding: 20rpx;
	
		.content-title {
			text-align: center;
			font-size: 30rpx;
		}
	
		.content-name {
			padding: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.name-left{
			font-size:28rpx;
			color: #333;
		}
		.name-right{
			font-size: 28rpx;
			color: #999;
		}
		.checkbox-title{
			width: 620rpx;
			font-size:28rpx;
			color: #333;
		}
		.check_group-style{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			.selectBoxes{
			  background: #0099cc !important;
			  color: #fff!important;
			}
			.checkboxes{
				height: 60rpx;
				padding: 10rpx 80rpx;
				border: 1px solid  #0099cc;
				margin: 20rpx;
				border-radius: 7rpx;
				color: #000;
			}
			
			
		}
		.check-box {
			width: 620rpx;
			padding: 40rpx;
		}
	
		.btn-grow {
			padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.surebtn{
				color: #0099cc;
			}
		}
	
		
	}
</style>
